<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 10px" v-if="isShowAction">
      <el-form ref="form" :model="info" label-width="90px" :rules="rules">
        <div class="el-dialog-div form-scrollbar">
          <div style="display: flex">
            <el-form-item label="" prop="type">
              <el-select
                v-model="info.type"
                class="filter-left"
                :placeholder="$t('common.select', [$t('common.type')])"
              >
                <el-option
                  v-for="item in options"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="nextAt">
              <div class="block">
                <el-date-picker
                  v-model="info.nextAt"
                  type="datetime"
                  :placeholder="$t('customer.nextContactTime')"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-button-group
              style="margin-top: 3px; position: absolute; right: 21px"
            >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-check"
                @click="editFollow()"
                >{{ $t('common.add') }}</el-button
              >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-refresh-left"
                @click="reset()"
                >{{ $t('common.reset') }}</el-button
              >
            </el-button-group>
          </div>
          <el-form-item label="" prop="content">
            <el-input
              type="textarea"
              v-model="info.content"
              :rows="6"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-scrollbar
      ref="myScrollbar"
      :wrap-class="{ wrapClass: true }"
      class="form-scrollbar-timeline scrollbar-back-top"
      :style="
        isShowAction
          ? { height: 'calc(100vh - 575px)' }
          : { height: 'calc(100vh - 325px)' }
      "
      v-loading="infoLoading"
    >
      <el-timeline style="padding-inline-start: unset; margin: 5px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          type="primary"
          icon="el-icon-more"
          :timestamp="activity.createdAt"
        >
          <el-card shadow="never">
            <div style="position: absolute; right: 20px">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ $t('common.actions')
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="beforeHandleCommand(activity.id, 'edit')"
                    >{{ $t('common.edit') }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="beforeHandleCommand(activity.id, 'delete')"
                    >{{ $t('common.delete') }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <p>
              <span class="timeline-label">{{
                $t('customer.followUpMethod')
              }}</span
              >：{{ getTypeDesc(activity.type) }}
            </p>
            <p>
              <span class="timeline-label">{{
                $t('customer.followUpLog')
              }}</span
              >{{ activity.content }}
            </p>
            <p v-if="activity.nextAt">
              <span class="timeline-label">{{
                $t('customer.nextContact')
              }}</span
              >{{ activity.nextAt }}
            </p>
            <p>
              <span class="timeline-label">{{
                $t('customer.followUpUser')
              }}</span
              >{{ activity.user.trueName }}
            </p>
            <p>
              <span class="timeline-label">{{ $t('common.updateAt') }}</span
              >{{ activity.updatedAt }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>

    <el-dialog
      :title="$t('customer.editFollowUpRecord')"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="500px"
    >
      <el-form
        ref="form"
        v-loading="editLoading"
        :model="rowInfo"
        :rules="rules"
        label-width="90px"
      >
        <div class="el-dialog-div form-scrollbar" style="height: 220px">
          <div style="display: flex">
            <el-form-item label="" prop="type">
              <el-select
                v-model="rowInfo.type"
                class="filter-left"
                :placeholder="$t('common.select', [$t('common.type')])"
              >
                <el-option
                  v-for="item in options"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="nextAt">
              <div class="block">
                <el-date-picker
                  v-model="rowInfo.nextAt"
                  type="datetime"
                  :placeholder="$t('customer.nextContactTime')"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="" prop="content">
            <el-input
              type="textarea"
              v-model="rowInfo.content"
              :rows="6"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12" class="btnEdit">
            <el-button
              :disabled="editLoading"
              type="primary"
              @click="editFollow()"
              >{{ $t('permission.confirm') }}</el-button
            >
          </el-col>
          <el-col :span="12" class="btnEdit">
            <el-button @click="dialogVisible = false">{{
              $t('common.cancel')
            }}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createFollow,
  updateFollow,
  getList,
  deleteFollow,
  getFollow,
} from '@/api/customer/follow'

export default {
  name: 'follow',
  props: {
    // show: {
    //   type: Boolean,
    //   default: false
    // },
    customerId: '',
    closeAction: '',
    refresh: '',
    isShowAction: true,
  },
  data() {
    return {
      infoLoading: true,
      editLoading: true,
      dialogVisible: false,
      id: '',
      info: {
        type: '',
        nextAt: '',
        content: '',
      },
      rowInfo: {},
      options: [
        { label: this.$t('customer.callPhone'), value: 1 },
        { label: this.$t('customer.sendEmail'), value: 2 },
        { label: this.$t('customer.sendSms'), value: 3 },
        { label: this.$t('customer.meet'), value: 4 },
      ],
      activities: [],
      rules: {
        //element form表单元素验证
        label: [
          {
            required: true,
            message: this.$t('common.select', [this.$t('common.type')]),
            trigger: 'blur',
          },
        ],
        content: [
          {
            required: true,
            message: this.$t('common.enter', [this.$t('customer.record')]),
            trigger: 'blur',
          },
        ],
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.info = {
        type: '',
        nextAt: '',
        content: '',
      }
    },
    getTypeDesc(type) {
      var arr = [
        '',
        this.$t('customer.callPhone'),
        this.$t('customer.sendEmail'),
        this.$t('customer.sendSms'),
        this.$t('customer.meet'),
      ]
      return arr[type]
    },
    async getList() {
      this.id = ''
      await getList(this.customerId)
        .then((res) => {
          this.activities = res.data
          setTimeout(() => {
            this.infoLoading = false
          }, 0.5 * 1000)
          setTimeout(() => {
            this.timelineHeight = {}
          }, 1000)
        })
        .catch(() => {
          setTimeout(() => {
            this.infoLoading = false
          }, 0.5 * 1000)
        })
    },
    editFollow() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.infoLoading = true
          let data = this.info
          data.customerId = this.customerId
          if (this.id != '') {
            data = this.rowInfo
            await updateFollow(this.id, data)
              .then((res) => {
                this.$notify({
                  title: this.$t('common.success'),
                  message: this.$t('common.updateSuccessfully'),
                  type: 'success',
                  duration: 2000,
                })
                this.dialogVisible = false
                this.reset()
                this.getList()
                this.$emit('refresh')
                setTimeout(() => {
                  this.infoLoading = false
                }, 0.5 * 1000)
              })
              .catch(() => {
                setTimeout(() => {
                  this.infoLoading = false
                }, 0.5 * 1000)
              })
          } else {
            await createFollow(data)
              .then((res) => {
                this.$notify({
                  title: this.$t('common.success'),
                  message: this.$t('common.addSuccessfully'),
                  type: 'success',
                  duration: 2000,
                })
                this.reset()
                this.getList()
                this.$emit('refresh')
                setTimeout(() => {
                  this.infoLoading = false
                }, 0.5 * 1000)
              })
              .catch(() => {
                setTimeout(() => {
                  this.infoLoading = false
                }, 0.5 * 1000)
              })
          }
        }
      })
    },
    beforeHandleCommand(scope, command) {
      return {
        scope: scope,
        command: command,
      }
    },
    handleCommand(command) {
      switch (command.command) {
        case 'edit':
          this.editRow(command.scope)
          break
        case 'delete':
          this.deleteRow(command.scope)
          break
      }
    },
    async editRow(id) {
      await getFollow(id).then((res) => {
        this.rowInfo = res.data
        this.id = res.data.id
        setTimeout(() => {
          this.editLoading = false
          this.dialogVisible = true
        }, 0.5 * 1000)
      })
    },
    deleteRow(id) {
      this.$confirm(this.$t('customer.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      })
        .then(async () => {
          this.infoLoading = true
          await deleteFollow(id).then((res) => {
            this.$notify({
              title: this.$t('common.success'),
              message: this.$t('common.deleteSuccessfully'),
              type: 'success',
              duration: 2000,
            })
            this.getList()
          })
        })
        .catch(() => {
          setTimeout(() => {
            this.infoLoading = false
          }, 0.5 * 1000)
        })
    },
  },
}
</script>

<style scoped>
.form-scrollbar /deep/ .el-form-item__content {
  margin-left: unset !important;
}

.form-scrollbar {
  height: 200px;
}

.form-scrollbar-timeline {
  /*height: calc(100vh - 575px)*/
}

.timeline-label {
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
/deep/ .el-card {
  border: unset !important;
}
</style>
